import React, {useState} from 'react'
import {Card, Progress, Collapse} from "reactstrap";
import {percentage} from '../../../../helpers/utils'
import {ChevronDown, ChevronUp} from "react-feather"

const CountryCardItem = props => (
    <div className={`country-card__item ${props.className || ''}`}>
      <div className="mb-25">
        <div className="country-card__info">
          <span className="mb-25">{props.name}</span>
        </div>
        <div className="country-card__count">
          <span className="d-block">{`${percentage(props.count, props.sum)}%`}</span>
        </div>
      </div>
      <div className="d-flex justify-content-between align-items-center">
        <Progress className="analytics-card__progress small-progress-analytics" color="primary" value={percentage(props.count, props.sum)} />
        <div className="stastics-info text-right">
          <span className="text-muted d-block">{props.count.toLocaleString('ru')}</span>
        </div>
      </div>
    </div>
)
const CountryCity = React.memo(props => {
  let sum = props.data.reduce((acc, item) =>  acc + item.count, 0)
  const showElem = [], hideElem = []

  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  props.data.forEach((item, index) => {
    if(index < 7) {
      showElem.push(
        <CountryCardItem
          key={index}
          name={item.name}
          count={item.count}
          sum={sum}
        />
    )} else {
      hideElem.push(
        <CountryCardItem
          key={index}
          name={item.name}
          count={item.count}
          sum={sum}
          className="country-card__collapse-item"
        />
      )
    }
  })

  return (
    <Card className={`analytics-card country-city-card ${props.bgColor}`}>
      <div className="analytics-card__header d-flex justify-content-between">
        <div className="analytics-card__title">{props.title}</div>
        {
          props.data.length > 7
          && <span onClick={toggle} className="flat-success cursor-pointer">
            { isOpen ? <ChevronUp size={18} className="mr-25" /> : <ChevronDown size={18} className="mr-25" /> }
            Еще
          </span>
        }
      </div>
      <div className="analytics-card__content">
        {showElem}
        <Collapse isOpen={isOpen}>
          {hideElem}
        </Collapse>
      </div>
    </Card>
  )
})

export default CountryCity
